<template>
	<view class="content">
		<top-nav title="视频列表"></top-nav>
		<view style="width: 100%;height: 96rpx;"></view>
		<view class="top-tap-con">
			<view class="lookMeTab flex">
				<view class="nav" :class="[ current== 1?'action':'']" data-id='1' @click="onClickItem">高层寄语</view>
				<view class="nav" :class="[ current== 2?'action':'']" data-id='2' @click="onClickItem">学界卓见</view>
			</view>
		</view>
		<view v-if="current== 1" class="first-content">
			<view class="cases" v-for="(item,index) in 3" :key='index' @click="videoDetail">
				<view class="img-cover">
					<image src="../../static/images/ceshi.webp" class="img"></image>
					<image src="../../static/images/icon_video_stop.png" class="stop"></image>
				</view>
				<view class="video-con">
					<view class="ellips">
						爱思唯尔新任CEO白可珊：坦诚、透明、开放、互信携手为科学技术和世界可持续发展贡献力量互信携手为科学技术和世界可持续发展贡献力量
					</view>
					<view class="dianzan-con flex">
						<view class="zan-cases flex align-center">
							<image src="../../static/images/icon_zan_nor.png"></image>
							<text>999+</text>
						</view>
						<view class="zan-cases flex align-center">
							<image src="../../static/images/icon_zan_nor2.png"></image>
							<!-- <image src="../../static/images/icon_zan_nor1.png"></image> -->
							<text>10</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="current== 2" class="last-content">
			<view class="banner-con"><image src="../../static/images/ceshi.webp"></image> </view>
			<view class="last-main-con">
				<view v-for="(index,item) in 2" :key='index'>
					<view class="title flex align-center">
						<view class="line"></view>
						<text>北京大学</text>
					</view>
					<view class="cases" v-for="(index,item) in 2" :key='index'>
						<view class="">
							<view class="text-con flex">
								<view class="img-con">
									<image src="../../static/images/ceshi.webp"></image>
								</view>
								<view class="ellips">爱思唯尔新任CEO白可珊：坦诚、透明、开放、互信——携手为科学技术和世界可持续发展贡献力量</view>
							</view>
							<view></view>
						</view>
						<view class="dianzan-con flex">
							<view class="zan-cases flex align-center">
								<image src="../../static/images/icon_zan_nor.png"></image>
								<text>999+</text>
							</view>
							<view class="zan-cases flex align-center">
								<image src="../../static/images/icon_zan_nor2.png"></image>
								<!-- <image src="../../static/images/icon_zan_nor1.png"></image> -->
								<text>10</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	var com = require('@/common/com.1.0.js');
	export default {
		data() {
			return {
				current:1
			}
		},
		onLoad() {

		},
		methods: {
			// 选项卡切换
			onClickItem(e) {
				var index = e.currentTarget.dataset.id
				if (this.current !== index) {
					this.current = index;
				}
			},
			videoDetail(){
				com.toUrl('video-detail')
			}
		}
	}
</script>
<style>page{background-color: #F7F7F7;padding-bottom: 20rpx;}</style>
<style lang="scss" scoped>
.content{
	.top-tap-con{
		// position: fixed;
		// top: 96rpx;
		// left: 0;
		width: 100%;
		height: 88rpx;
		background-color: #Fff;
	}
	/* tab切换 */
	.lookMeTab{
		padding: 24rpx 0;
		justify-content: center;
		color: #262626;
	}
	.lookMeTab .nav{
		margin: 0 35rpx;
		position: relative;
		font-weight: bold;
	}
	.lookMeTab .nav:after {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -16rpx;
		width: 32rpx;
		height: 6rpx;
		border-radius: 50rpx;
	}
	.lookMeTab .action{
		color: #FF6C02;
	}
	.lookMeTab .nav.action:after {
		background-color: #FF6C02;
	}
	.first-content{
		.cases{
			width: 702rpx;
			background: #FFF;
			border-radius: 24rpx;
			margin:24rpx auto 0;
			overflow: hidden;
			.img-cover{
				position: relative;
				width: 100%;
				height: 394rpx;
				.img{
					width: 100%;
					height: 100%;
				}
				.stop{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					width: 96rpx;
					height: 96rpx;
				}
			}
			.video-con{
				padding:24rpx 32rpx 34rpx;
			}
			
		}
	}
	.dianzan-con{
		justify-content: flex-end;
		margin-top: 25rpx;
		color: #595959;
		font-size: 26rpx;
		.zan-cases{
			// width: 100rpx;
			margin-left: 30rpx;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
	.last-content{
		padding: 0 24rpx;
		.banner-con{
			width: 100%;
			height: 394rpx;
			border-radius: 24rpx;
			overflow: hidden;
			margin-top: 24rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.last-main-con{
			.title{
				font-size: 40rpx;
				font-weight: bold;
				margin: 32rpx auto 16rpx;
				.line{
					width: 8rpx;
					height: 36rpx;
					background: #FFB851;
					border-radius: 4rpx;
					margin-right: 16rpx;
				}
			}
			.cases{
				padding: 20rpx 20rpx 26rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-bottom: 16rpx;
				.text-con{
					font-size: 26rpx;
					.img-con{
						width: 256rpx;
						height: 144rpx;
						flex-shrink: 0;
						margin-right: 20rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 16rpx
						}
					}
					.ellips{
						max-height: 138rpx;
						-webkit-line-clamp: 4;
					}
				}
				.dianzan-con{
					margin-top: 18rpx;
				}
			}
		}
	}
	
}
</style>
